import { PlusOutlined } from '@ant-design/icons'
import {
  Row,
  Col,
  Flex,
  Typography,
  Button,
  Form,
  Input,
  Select,
  Table,
  Switch,
  Drawer,
  Modal,
  Divider,
  Radio,
  message
} from 'antd'
import React, { useEffect, useState } from 'react'
import { adminActivatyList } from '../service/activaty'
import {
  timedMsgAddAPI,
  timedMsgDelAPI,
  timedMsgEditAPI,
  timedMsgListAPI
} from '../service/message'

export default function TouchTimedMsg() {
  const [form] = Form.useForm()
  // 模态框
  const [modalOpen, setModalOpen] = useState(false)
  // 是否有选中活动
  const [selectedActive, setSelectedActive] = useState()
  const [isOpen, setIsOpen] = useState(false)
  // 列表
  const [coupleList, setCoupleList] = useState([])
  // 活动列表
  const [activeList, setActiveList] = useState([])
  // 活动名称
  const [tmpActiveName, setTmpActiveName] = useState('请选择')
  const [activeName, setActiveName] = useState('请选择')
  // 活动id
  const [tmpActiveId, setTmpActiveId] = useState('')
  const [activeId, setActiveId] = useState('')
  const [id, setId] = useState('')
  // 分页
  const [page, setPage] = useState(1)
  const [n, setN] = useState(1)
  const [m, setM] = useState(0)
  useEffect(() => {
    // 活动列表
    ;(async () => {
      const res = await adminActivatyList({ pageNo: 1, pageSize: 100 })
      console.log(res)
      if (res.data) {
        setActiveList(res.data.objects)
      }
    })()
  }, [])
  useEffect(() => {
    // 消息
    ;(async () => {
      const res = await timedMsgListAPI({ pageNo: page, pageSize: 10 })
      console.log(res)
      setCoupleList(res.data)
    })()
  }, [page, n, m])

  //判断抽屉的打开状态
  useEffect(() => {
    if (!isOpen) {
      setActiveName('请选择')
    }
  }, [isOpen])
  return (
    <>
      <Row className="info">
        <Col span={24}>
          <Flex justify={'space-between'}>
            <Typography.Title level={3}>信息管理</Typography.Title>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setIsOpen(true)}
            >
              新建定时消息
            </Button>
          </Flex>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Form layout="inline">
            <Form.Item label="模板名称" name="storeName">
              <Input style={{ width: 200 }} />
            </Form.Item>
            <Form.Item label="模板状态" initialValue={'0'}>
              <Select
                style={{ width: 200 }}
                placeholder="请选择模板状态"
                options={[
                  {
                    value: '',
                    label: '全部'
                  },
                  {
                    value: '0',
                    label: '启用'
                  },
                  {
                    value: '1',
                    label: '停用'
                  }
                ]}
              />
            </Form.Item>
            <Form.Item>
              <Button type="default" htmlType="reset">
                重置
              </Button>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
      <Row className="container">
        <Col span={24}>
          <Typography.Paragraph style={{ fontSize: 16 }}>
            定时列表
          </Typography.Paragraph>
        </Col>
        <Col span={24}>
          <Table
            rowKey="id"
            pagination={{ pageSize: 10, onChange: (page) => setPage(page) }}
            dataSource={coupleList}
            columns={[
              {
                title: '序号',
                dataIndex: 'id',
                key: 'id'
              },
              {
                title: '模板名称',
                dataIndex: 'tempName',
                key: 'tempName'
              },
              {
                title: '消息标题',
                dataIndex: 'msgTitle',
                key: 'msgTitle'
              },
              {
                title: '营销活动',
                dataIndex: 'activityName',
                key: 'activityName'
              },
              {
                title: '创建时间',
                dataIndex: 'createAt',
                key: 'createAt'
              },
              {
                title: '启用状态',
                dataIndex: 'status',
                key: 'status',
                render: (_, record) => (
                  <Switch
                    defaultChecked={record.status}
                    onChange={async (checked) => {
                      if (checked) {
                        await timedMsgEditAPI({ id: record.id, status: 1 })
                        setN(n + 1)
                        // message.success('启用成功')
                      } else {
                        await timedMsgEditAPI({ id: record.id, status: 0 })
                        setM(m + 1)
                        // message.success('停用成功')
                      }
                    }}
                  />
                )
              },
              {
                title: '操作',
                key: 'action',
                render: (_, record) => (
                  <span className="op">
                    <a
                      onClick={() => {
                        setIsOpen(true)
                        form.setFieldsValue(record)
                        setId(record.id)
                        setActiveId(record.activityId)
                        setActiveName(record.activityName)
                        // 通过活动id获取活动名称
                        for (let i = 0; i < activeList.length; i++) {
                          if (activeList[i].id === record.activityId) {
                            setActiveName(activeList[i].activityName)
                            setActiveId(activeList[i].id)
                            console.log(
                              activeList[i].activityName,
                              activeList[i].id
                            )
                          }
                        }
                      }}
                      style={{ marginRight: 10 }}
                    >
                      编辑
                    </a>
                    <a
                      onClick={async () => {
                        const res = await timedMsgDelAPI(record.id)
                        console.log(res)
                        setN(n + 1)
                        message.success('删除成功')
                      }}
                    >
                      删除
                    </a>
                  </span>
                )
              }
            ]}
          />
        </Col>
      </Row>
      {/* 右侧抽屉 */}
      <Drawer
        title="新建定时模板"
        onClose={() => {
          setIsOpen(false)
          setId('')
          setN(n + 1)
        }}
        open={isOpen}
        width={500}
        maskClosable={false}
        destroyOnClose
      >
        <Form
          layout="vertical"
          form={form}
          preserve={false}
          onFinish={async (values) => {
            values.activityId = activeId
            console.log(values)
            if (!id) {
              // 如果是添加
              const res = await timedMsgAddAPI(values)
              console.log(res)
              setM(m + 1)
              message.success('添加成功')
            } else {
              // 否则是编辑
              const res = await timedMsgEditAPI({ ...values, id })
              console.log(res)
              setM(m + 1)
              message.success('编辑成功')
            }
            setId()
            setIsOpen(false)
          }}
        >
          <Form.Item
            label="模板名称"
            name="tempName"
            rules={[{ required: true, message: '请输入模板名称' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="消息标题"
            name="msgTitle"
            rules={[{ required: true, message: '请输入消息标题' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="消息内容"
            name="content"
            rules={[{ required: true, message: '请输入消息内容' }]}
          >
            <Input.TextArea maxLength={500} style={{ height: 100 }} showCount />
          </Form.Item>
          <Form.Item label="营销活动">
            <Select
              placeholder={'请选择'}
              value={activeName}
              onClick={() => setModalOpen(true)}
            />
          </Form.Item>
          <Form.Item label="启用状态" name="status" initialValue={1}>
            <Radio.Group>
              <Radio value={1}>启用</Radio>
              <Radio value={0}>禁用</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item style={{ textAlign: 'right' }}>
            <Button htmlType="reset" style={{ marginRight: 10 }}>
              重置
            </Button>
            <Button type="primary" htmlType="submit">
              确定
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
      {/* 选择营销活动 */}
      <Modal
        title="选择活动"
        open={modalOpen}
        width={1000}
        onCancel={() => setModalOpen(false)}
        destroyOnClose
        maskClosable={false}
        onOk={() => {
          setModalOpen(false)
          setActiveId(tmpActiveId)
          setActiveName(tmpActiveName)
        }}
      >
        <Divider />
        <Row>
          <Col span={24}>
            <Form onFinish={() => {}} layout="inline">
              <Form.Item name="couponName" label="活动名称">
                <Input placeholder="请输入活动名称" />
              </Form.Item>
              <Form.Item name="couponName" label="活动类型">
                <Select placeholder="请选择活动类型" style={{ width: 200 }} />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </Form.Item>
            </Form>
          </Col>
        </Row>
        <Row style={{ marginTop: 20 }}>
          <Col span={24}>
            <Table
              rowKey="id"
              rowSelection={{
                type: 'radio',
                onChange: (selectedRowKeys, selectedRows) => {
                  console.log(selectedRowKeys, selectedRows)
                  setTmpActiveName(selectedRows[0].activityName)
                  // 保存活动id
                  setTmpActiveId(selectedRows[0].id)
                }
              }}
              columns={[
                { key: 'id', title: '序号', dataIndex: 'id' },
                {
                  key: 'activityName',
                  title: '活动名称',
                  dataIndex: 'activityName'
                },
                {
                  key: 'activityTarget',
                  title: '活动目标',
                  dataIndex: 'activityTarget'
                },
                {
                  key: 'activityType',
                  title: '活动类型',
                  dataIndex: 'activityType',
                  render: (_, record) => (
                    <>
                      {record.activityType === 1 && '全部'}
                      {record.activityType === 2 && '赠领'}
                      {record.activityType === 3 && '拼团'}
                      {record.activityType === 4 && '抽奖'}
                      {record.activityType === 5 && '砍一刀'}
                    </>
                  )
                },
                {
                  key: 'channelType',
                  title: '推广渠道',
                  dataIndex: 'channelType',
                  render: (_, record) => (
                    <>
                      {record.channelType === 1 && 'APP'}
                      {record.channelType === 2 && '小程序'}
                    </>
                  )
                },
                {
                  key: 'endDate',
                  title: '活动时间',
                  dataIndex: 'endDate',
                  render: (_, record) => (
                    <>
                      {record.startDate.substring(0, 10)} -{' '}
                      {record.endDate.substring(0, 10)}
                    </>
                  )
                }
              ]}
              dataSource={activeList}
            />
          </Col>
        </Row>
      </Modal>
    </>
  )
}
